<template>
    <div id="detail_bar">
        <div class="serve">
            <img src="../../../assets/img/detail/serve.png" alt="">
            <p>客服</p>
        </div>
        <div class="shop">
            <img src="../../../assets/img/detail/shop.png" alt="">
            <p>店铺</p>
        </div>
        <div class="collection">
            <img src="../../../assets/img/detail/collection.png" alt="">
            <p>收藏</p>
        </div>
        <div class="shopCar" @click="addShopCar">加入购物车</div>
        <div class="buy">购买</div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "DetailBar",
        methods:{
            addShopCar(){
                this.$emit('addShopCar');
                Toast({
                    message:'已添加到购物车！',
                    position:'middle',
                    duration:1000
                })
            }
        }
    }
</script>

<style scoped>
    #detail_bar{
        height: 49px;
        padding-top: 4px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        background-color: white;
        padding-bottom: 4px;
    }
    .serve{
        text-align: center;
        flex: 1;
        font-size: 12px;
    }
    .shop{
        text-align: center;
        flex: 1;
        font-size: 12px;
    }
    .collection{
        text-align: center;
        flex: 1;
        font-size: 12px;
    }
    .shopCar{
        line-height: 49px;
        font-size: 12px;
        vertical-align: center;
        text-align: center;
        width: 80px;
        background-color: yellow;
    }
    .buy{
        line-height: 49px;
        text-align: center;
        width: 80px;
        background-color: lightcoral;
        color: white;
    }
    img{
        margin-top: 5px;
        width: 20px;
        height: 20px;
    }
</style>